<template>
  <div>
    <!-- <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>菜单管理</el-breadcrumb-item>
    </el-breadcrumb> -->

    <!--      添加化合物按钮区域-->
    <el-card style="margin-top: 10px;">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <div class="manager-all">
          <div class="project-manager"></div>
          <div class="project-item">
            <el-breadcrumb-item :to="{ path: '/' }"
              >项目列表
            </el-breadcrumb-item>
          </div>
        </div>
        <!-- <el-breadcrumb-item>菜单管理</el-breadcrumb-item> -->
        <hr
          style="width: 1642px;
                 height: 1px;
                 border:none;
                 background: #E8ECF0;
                 margin-left:-23px;"
        />
      </el-breadcrumb>
      <div style="margin-top:20px;display:flex;justify-content:space-between;">
        <div>
          <el-button type="primary" @click="addFormVisible = true" class="add"
            ><img src="../../icon标/添加数据.png" class="addimg" alt="" />
            添加数据
          </el-button>
          <el-button
            style="width:157px !important;"
            type="primary"
            class="add"
            @click="downloadAllCompound()"
            >图片内嵌Excel下载
          </el-button>
          <el-button
            type="primary"
            class="add"
            @click="downloadAllCompoundAndPic()"
          >
            打包全部下载
          </el-button>
        </div>

        <div>
          <el-input
            v-model="query"
            clearable
            placeholder="搜索想要查找的内容"
            @clear="getBioList"
            class="input"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="getBioList"
            ></el-button>
          </el-input>
          <el-button
            @click="searchBioid"
            class="add"
            type="primary"
            style="width:120px !important;height:36px !important;margin-left:10px;"
          >
            高级搜索
            <img
              src="../../icon标/定位.png"
              alt=""
              style="margin-left:8px;margin-top:-5px;"
            />
          </el-button>
          <el-button
            class="add"
            type="primary"
            style="width:36px !important;height:36px !important;"
            @click="resetBioid()"
          >
            <img
              src="../../icon标/刷新.png"
              alt=""
              style="margin-left:-8px;margin-top:-5px;"
            />
          </el-button>
        </div>
      </div>

      <div class="Biosearch" v-if="search == true">
        <el-row style="display:flex;align-items:center;">
          请输入要下载的化合物范围 :
          <el-form style="display:flex;margin-top:25px;margin-left:10px;">
            <el-form-item label="">
              <el-input
                @input="inputChange"
                v-model="selectMin"
                placeholder="请输入化合物ID"
                clearable
              ></el-input>
            </el-form-item>
            <el-form-item label="—" style="margin-left:10px;"></el-form-item>
            <el-form-item label="">
              <el-input
                @input="inputChange"
                v-model="selectMax"
                placeholder="请输入化合物ID"
                clearable
              ></el-input>
            </el-form-item>
          </el-form>
        </el-row>

        <div class="Biobutton">
          <el-button
            style="width:157px !important;"
            type="primary"
            plain
            class="add"
            @click="downloadCompound()"
            >图片内嵌Excel下载
          </el-button>
          <el-button
            type="primary"
            plain
            class="add"
            @click="downloadCompoundAndPic()"
          >
            打包全部下载
          </el-button>
        </div>
      </div>

      <!--      角色列表区域-->
      <el-table
        :data="bioList"
        border
        stripe
        style="width:100%"
        class="bioTable"
        :header-cell-style="{ background: '#F6F7FB' }"
        @select="handleSelectionChange"
        @select-all="handleSelectionChange"
        :row-key="getRowBioKeys"
      >
        <!-- 展开列 -->
        <!-- <el-table-column type="expand">
          <template slot-scope="props">

            <el-form label-position="left" inline class="demo-table-expand">
              <el-row class="expand-msg">
                <el-col>
                  <el-form-item label="化合物编号" class="table-item">
                    <span class="table-item-span">{{ props.row.sid }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">
                <el-col class="expand-msg-left">
                  <el-form-item label="存储样品瓶1条形码" class="table-item">

                    <barcode :value="props.row.barCode1" :options="barcode_option">条形码加载失败</barcode>
                  </el-form-item>
                </el-col>
              </el-row>

              <el-row class="expand-msg">
                <el-col :span="12">
                  <el-form-item label="数据提供方" class="table-item">
                    <span class="table-item-span">{{ props.row.productDate }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="expand-msg-left">
                  <el-form-item label="数据产生日期" class="table-item">
                    <span class="table-item-span">{{ props.row.provider | timestampToTime }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">
                <el-col :span="12">
                  <el-form-item label="数据录入人员" class="table-item">
                    <span class="table-item-span">{{ props.row.keyboarder }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="expand-msg-left">
                  <el-form-item label="数据录入日期" class="table-item">
                    <span class="table-item-span">{{ props.row.inputDate | timestampToTime }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">
                <el-col :span="12">
                  <el-form-item label="测试项目1名称" class="table-item">
                    <span class="table-item-span">{{ props.row.projectName1 }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="expand-msg-left">
                  <el-form-item label="测试项目1数值" class="table-item">
                    <span class="table-item-span">{{ props.row.projectNumber1 }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">
                <el-col>
                  <el-form-item label="测试项目1图片" class="table-item">
                    <el-image class="table-image" :src="`http://121.36.58.180:8081/pictures/${props.row.projectPic1}`">
                      <div slot="error" class="image-slot">
                        <span class="table-item-span">图片加载失败或不存在</span>
                      </div>
                    </el-image>

                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">
                <el-col :span="12">
                  <el-form-item label="测试项目2名称" class="table-item">
                    <span class="table-item-span">{{ props.row.projectName2 }}</span>
                  </el-form-item>
                </el-col>
                <el-col :span="12" class="expand-msg-left">
                  <el-form-item label="测试项目2数值" class="table-item">
                    <span class="table-item-span">{{ props.row.projectNumber2 }}</span>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">
                <el-col>
                  <el-form-item label="测试项目2图片" class="table-item">
                    <el-image class="table-image" :src="`http://121.36.58.180:8081/pictures/${props.row.projectPic2}`">
                      <div slot="error" class="image-slot">
                        <span class="table-item-span">图片加载失败或不存在</span>
                      </div>
                    </el-image>

                  </el-form-item>
                </el-col>
              </el-row>
              <el-row class="expand-msg">

                <el-col :span="12">
                  <el-form-item label="测试数据SOP（如有）" class="table-item">
                    <el-button class="add-button" type="primary" @click="uploadFile(props.row.sopUrl)" plain>下载
                    </el-button>

                  </el-form-item>
                </el-col>
                <el-col :span="12" class="expand-msg-left">
                  <el-form-item label="测试原始数据" class="table-item">
                    <el-button class="add-button" type="primary" @click="uploadFile(props.row.originalDataUrl)" plain>
                      下载
                    </el-button>

                  </el-form-item>
                </el-col>
              </el-row>


            </el-form>

          </template>
        </el-table-column> -->
        <!-- 索引列 -->
        <!--        <el-table-column type="index" label="#"></el-table-column>-->
        <el-table-column
          type="selection"
          width="55"
          prop="isCheck"
          :reserve-selection="true"
        >
        </el-table-column>
        <el-table-column label="化合物编号" prop="sid"></el-table-column>
        <el-table-column label="录入人员" prop="keyboarder"></el-table-column>
        <el-table-column
          label="数据产生日期"
          prop="productDate"
          :formatter="formatDate"
        ></el-table-column>
        <el-table-column
          label="数据录入日期"
          prop="inputDate"
          :formatter="formatDate"
        ></el-table-column>
        <el-table-column label="操作" width="300px">
          <template slot-scope="scope">
            <!-- <el-button
              type="primary"
              icon="el-icon-edit"
              size="mini"
              @click="showEditDialog(scope.row.sid)"
              >编辑
            </el-button>
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click="removeBioBySid(scope.row.sid)"
              >删除
            </el-button> -->
            <div class="btn-all">
              <div class="bj" v-if="scope.row.perm === 0">
                <img src="../../icon标/编辑.png" alt="" />
                <el-link
                  type="primary"
                  :underline="false"
                  @click="showEditDialog(scope.row.sid)"
                  style="margin-left:5px;font-size:14px;cursor: pointer;margin-top:-5px;"
                  >编辑
                </el-link>
              </div>
              <div class="sx" v-if="scope.row.perm === 0"></div>
              <div class="xq">
                <img src="../../icon标/查看 (1).png" alt="" />
                <router-link
                  type="success"
                  :underline="false"
                  style="margin-left:5px;font-size:14px;cursor: pointer;"
                  :to="{path:'/Cedetails/'+scope.row.sid,query:{page:queryInfo.page,size:queryInfo.size}}"
                  >详情
                </router-link>
              </div>
              <div class="sx"></div>
              <div class="sc">
                <img src="../../icon标/删除.png" alt="" />
                <el-link
                  type="danger"
                  :underline="false"
                  @click="removeBioBySid(scope.row.sid)"
                  style="margin-left:5px;font-size:14px;cursor: pointer;margin-top:-5px;"
                  >删除
                </el-link>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <!--      分页区域-->
      <el-pagination
        background
        :current-page="queryInfo.page"
        :page-size="queryInfo.size"
        :page-sizes="[5, 10, 15, 20]"
        :total="total"
        layout="total, sizes, prev, pager, next, jumper"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      >
      </el-pagination>
      <!--添加化合物的弹出框-->
      <!--    prop.sync表示这个子组件会修改父组件的值，v-model表示这是个表单类型的组件。-->
      <!--      ※ 放大缩小容易乱样式 先把width写死了-->
      <el-dialog
        :visible.sync="addFormVisible"
        title="生物测试"
        width="1300px"
        @close="addBioClosed"
      >
        <hr
          style=" margin-top:-30px;border:none;background:#4087fc;height:1.5px;"
        />
        <hr
          style="margin-top:-9px;border:none;height:3px;width:100px;background:#4087fc;margin-left:0px;"
        />
        <!--            :rules先不写了-->
        <el-form
          :model="addForm"
          ref="addBioRef"
          label-width="140px"
          class="molecular-design"
          :rules="rules"
        >
          <!--            <el-col :span="8">-->
          <!--              <el-form-item label="化合物编号" prop="sid">-->
          <!--                <el-input v-model="addForm.sid"></el-input>-->
          <!--              </el-form-item>-->
          <!--            </el-col>-->
          <el-row style="margin-top:30px;">
            <el-row>
              <el-col :span="8">
                <el-form-item label="数据提供方 :" prop="provider">
                  <el-input v-model="addForm.provider"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="数据产生日期 :" prop="productDate">
                  <el-date-picker
                    v-model="addForm.productDate"
                    value-format="timestamp"
                    type="date"
                    placeholder="选择日期 "
                    style="width: 100%;"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="数据录入日期 :" prop="inputDate">
                  <el-date-picker
                    v-model="addForm.inputDate"
                    value-format="timestamp"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="存储样品瓶1条形码 :" prop="barCode1">
                  <el-input
                    v-model="addForm.barCode1"
                    placeholder="若未输入条形码 将自动生成"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="测试项目1名称 :" prop="projectName1">
                  <el-input v-model="addForm.projectName1"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="测试项目1数值 :" prop="projectNumber1">
                  <el-input v-model="addForm.projectNumber1"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <!--                <el-col :span="8">-->
              <!--                  <el-form-item label="数据录入人员 :" prop="keyboarder">-->
              <!--                    <el-input v-model="addForm.keyboarder"></el-input>-->
              <!--                  </el-form-item>-->
              <!--                </el-col>-->
              <el-col :span="8">
                <el-form-item label="测试项目2名称 :" prop="projectName2">
                  <el-input v-model="addForm.projectName2"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="测试项目2数值 :" prop="projectNumber2">
                  <el-input v-model="addForm.projectNumber2"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="测试项目1图片 :" prop="projectPic1">
                  <el-upload
                    v-model="addForm.projectPic1"
                    class="upload-demo"
                    ref="pic1"
                    :limit="1"
                    show-file-list
                    :action="url+`uploadPic`"
                    :on-preview="handlePreview"
                    :on-remove="handlePic1Remove"
                    :on-success="pic1HandleSuccess"
                    :on-error="pic1HandleError"
                    :file-list="fileListPic1"
                    :before-upload="beforePicUpload"
                    drag
                    :headers="headerObj"
                  >
                    <!-- <el-button slot="trigger" size="small" type="primary"
                          >选取文件</el-button
                        > -->
                    <div style="margin-top:35px;">
                      <img src="../../icon标/选取图片.png" alt="" />
                    </div>
                    <div class="el-upload__text">上传jpg/png文件</div>
                    <div slot="tip" class="el-upload__tip"></div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="测试项目2图片 :" prop="projectPic2">
                  <el-upload
                    v-model="addForm.projectPic2"
                    class="upload-demo"
                    ref="pic2"
                    :limit="1"
                    show-file-list
                    :action="url+`uploadPic`"
                    :on-preview="handlePreview"
                    :on-remove="handlePic2Remove"
                    :on-success="pic2HandleSuccess"
                    :on-error="pic2HandleError"
                    :file-list="fileListPic2"
                    :before-upload="beforePicUpload"
                    drag
                    :headers="headerObj"
                  >
                    <!-- <el-button slot="trigger" size="small" type="primary"
                        >选取文件</el-button
                      > -->
                    <div style="margin-top:35px;">
                      <img src="../../icon标/选取图片.png" alt="" />
                    </div>
                    <div class="el-upload__text">上传jpg/png文件</div>
                    <div slot="tip" class="el-upload__tip"></div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="测试数据SOP :" prop="sopUrl">
                  <el-upload
                    v-model="addForm.sopUrl"
                    class="upload-demo"
                    ref="sop"
                    :limit="1"
                    show-file-list
                    :action="url+`uploadFile`"
                    :on-preview="handlePreview"
                    :on-remove="handleSopRemove"
                    :on-success="sopHandleSuccess"
                    :on-error="sopHandleError"
                    :file-list="fileListSop"
                    drag
                    :headers="headerObj"
                  >
                    <div style="margin-top:35px;">
                      <img src="../../icon标/选取文件.png" alt="" />
                    </div>
                    <div class="el-upload__text">选取文件</div>
                    <div slot="tip" class="el-upload__tip"></div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="测试原始数据 :" prop="structureUrl">
                  <el-upload
                    v-model="addForm.structureUrl"
                    class="upload-demo"
                    ref="od"
                    :limit="1"
                    show-file-list
                    :action="url+`uploadFile`"
                    :on-preview="handlePreview"
                    :on-remove="handleOdRemove"
                    :on-success="odHandleSuccess"
                    :on-error="odHandleError"
                    :file-list="fileListOd"
                    drag
                    :headers="headerObj"
                  >
                    <!-- <el-button slot="trigger" size="small" type="primary"
                        >选取文件</el-button
                      >--->
                    <div style="margin-top:35px;">
                      <img src="../../icon标/选取文件.png" alt="" />
                    </div>
                    <div class="el-upload__text">选取文件</div>
                    <div slot="tip" class="el-upload__tip"></div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>
        </el-form>
        <!--      底部区域-->
        <span slot="footer" class="dialog-footer">
          <el-button @click="addFormVisible = false" plain>取 消</el-button>
          <el-button
            type="primary"
            @click="addBio"
            style="margin-left:50px;margin-bottom:15px;"
            >确 定</el-button
          >
        </span>
      </el-dialog>
      <!--修改用户的对话框-->
      <el-dialog
        title="修改化合物"
        :visible.sync="editBioVisible"
        width="1300px"
        @close="editBioClosed"
      >
        <hr
          style=" margin-top:-30px;border:none;background:#4087fc;height:1.5px;"
        />
        <hr
          style="margin-top:-9px;border:none;height:3px;width:100px;background:#4087fc;margin-left:0px;"
        />
        <el-form
          :model="editForm"
          :rules="editBioRules"
          ref="editBioRef"
          label-width="140px"
        >
          <el-row style="margin-top:30px;">
            <el-row>
              <el-col :span="8">
                <el-form-item label="化合物编号 :" prop="sid">
                  <el-input v-model="editForm.sid" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="数据提供方 :" prop="provider">
                  <el-input v-model="editForm.provider"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="数据产生日期 :" prop="productDate">
                  <el-date-picker
                    v-model="editForm.productDate"
                    value-format="timestamp"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="数据录入日期 :" prop="inputDate">
                  <el-date-picker
                    v-model="editForm.inputDate"
                    value-format="timestamp"
                    type="date"
                    placeholder="选择日期"
                    style="width: 100%;"
                  ></el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="存储样品瓶1条形码 :" prop="barCode1">
                  <el-input
                    v-model="editForm.barCode1"
                    placeholder="若未输入条形码 将自动生成"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="测试项目1名称 :" prop="projectName1">
                  <el-input v-model="editForm.projectName1"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="测试项目1数值 :" prop="projectNumber1">
                  <el-input v-model="editForm.projectNumber1"></el-input>
                </el-form-item>
              </el-col>
              <!--                <el-col :span="8">-->
              <!--                  <el-form-item label="数据录入人员 :" prop="keyboarder">-->
              <!--                    <el-input v-model="editForm.keyboarder"></el-input>-->
              <!--                  </el-form-item>-->
              <!--                </el-col>-->
              <el-col :span="8">
                <el-form-item label="测试项目2名称 :" prop="projectName2">
                  <el-input v-model="editForm.projectName2"></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="测试项目2数值 :" prop="projectNumber2">
                  <el-input v-model="editForm.projectNumber2"></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="测试项目1图片 :" prop="projectPic1">
                  <el-upload
                    v-model="editForm.projectPic1"
                    class="upload-demo"
                    ref="pic1"
                    :limit="1"
                    show-file-list
                    :action="url+`uploadPic`"
                    :on-preview="handlePreview"
                    :on-remove="handlePic1Remove"
                    :on-success="pic1HandleSuccess"
                    :on-error="pic1HandleError"
                    :file-list="fileListPic1"
                    :before-upload="beforePicUpload"
                    drag
                    :headers="headerObj"
                  >
                    <!-- <el-button slot="trigger" size="small" type="primary"
                        >选取文件</el-button
                      >
                      <div slot="tip" class="el-upload__tip">
                        只能上传jpg/png文件
                      </div> -->
                    <div style="margin-top:35px;">
                      <img src="../../icon标/选取图片.png" alt="" />
                    </div>
                    <div class="el-upload__text">上传jpg/png文件</div>
                    <div slot="tip" class="el-upload__tip"></div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="测试项目2图片 :" prop="projectPic2">
                  <el-upload
                    v-model="editForm.projectPic2"
                    class="upload-demo"
                    ref="pic2"
                    :limit="1"
                    show-file-list
                    :action="url+`uploadPic`"
                    :on-preview="handlePreview"
                    :on-remove="handlePic2Remove"
                    :on-success="pic2HandleSuccess"
                    :on-error="pic2HandleError"
                    :file-list="fileListPic2"
                    :before-upload="beforePicUpload"
                    drag
                    :headers="headerObj"
                  >
                    <!-- <el-button slot="trigger" size="small" type="primary"
                        >选取文件</el-button
                      >
                      <div slot="tip" class="el-upload__tip">
                        只能上传jpg/png文件
                      </div> -->
                    <div style="margin-top:35px;">
                      <img src="../../icon标/选取图片.png" alt="" />
                    </div>
                    <div class="el-upload__text">上传jpg/png文件</div>
                    <div slot="tip" class="el-upload__tip"></div>
                  </el-upload>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="测试数据SOP :" prop="sopUrl">
                  <el-upload
                    v-model="editForm.sopUrl"
                    class="upload-demo"
                    ref="sop"
                    :limit="1"
                    show-file-list
                    :action="url+`uploadFile`"
                    :on-preview="handlePreview"
                    :on-remove="handleSopRemove"
                    :on-success="sopHandleSuccess"
                    :on-error="sopHandleError"
                    :file-list="fileListSop"
                    drag
                    :headers="headerObj"
                  >
                    <!-- <el-button slot="trigger" size="small" type="primary"
                        >选取文件</el-button
                      > -->
                    <div style="margin-top:35px;">
                      <img src="../../icon标/选取文件.png" alt="" />
                    </div>
                    <div class="el-upload__text">选取文件</div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="8">
                <el-form-item label="测试原始数据 :" prop="structureUrl">
                  <el-upload
                    v-model="editForm.structureUrl"
                    class="upload-demo"
                    ref="od"
                    :limit="1"
                    show-file-list
                    :action="url+`uploadFile`"
                    :on-preview="handlePreview"
                    :on-remove="handleOdRemove"
                    :on-success="odHandleSuccess"
                    :on-error="odHandleError"
                    :file-list="fileListOd"
                    drag
                    :headers="headerObj"
                  >
                    <!-- <el-button slot="trigger" size="small" type="primary"
                      >选取文件</el-button
                    > -->
                    <div style="margin-top:35px;">
                      <img src="../../icon标/选取文件.png" alt="" />
                    </div>
                    <div class="el-upload__text">选取文件</div>
                  </el-upload>
                </el-form-item>
              </el-col>
            </el-row>
          </el-row>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="editBioVisible = false">取 消</el-button>
          <el-button type="primary" @click="editBio">确 定</el-button>
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import VueBarcode from "@xkeshi/vue-barcode";
import axios from "axios";
import { getCookie } from "../../utils/util";
//"s_id"	"bar_code_1"	"product_date"	"provider"	"input_date"	"keyboarder"	"project_name_1"	"project_number_1"	"project_pic_1"	"project_name_2"	"project_number_2"	"project_pic_2"	"sop_url"	"original_data_url"

export default {
  //分子设计
  name: "Bioassay",
  data() {
    return {
      selectValue: [0, 0],
      selectMax: "",
      selectMin: "",
      multipleSelection: [],
      multipleSelectionSid: [],
      search: false,
      bioList: [],
      // 以下是弹出框
      //是否显示弹出框
      addFormVisible: false,
      //要提交的表单信息
      addForm: {
        sid: "",
        barCode1: "",
        productDate: "",
        provider: "",
        inputDate: "",
        projectName1: "",
        projectNumber1: "",
        projectPic1: "",
        projectName2: "",
        projectNumber2: "",
        projectPic2: "",
        sopUrl: "",
        originalDataUrl: "",
        type: 3
      },
      //有个name 有个url
      fileListPic1: [],
      fileListPic2: [],
      fileListSop: [],
      fileListOd: [],
      queryInfo: {
        query: "",
        // 当前的页数
        page: 1,
        // 当前每页显示多少条数据
        size: 5,
        type: 3,
        permission: ""
      },
      total: 0,
      // 监听 分页的size 改变的事件
      query: "",

      editBioVisible: false,
      // 查询到的用户信息对象
      editForm: {
        sid: "",
        barCode1: "",
        productDate: "",
        provider: "",
        inputDate: "",
        projectName1: "",
        projectNumber1: "",
        projectPic1: "",
        projectName2: "",
        projectNumber2: "",
        projectPic2: "",
        sopUrl: "",
        originalDataUrl: "",
        type: 3
      },
      editBioRules: {
        // email: [
        //   {
        //     required: true,
        //     message: '请输入密码',
        //     trigger: 'blur'
        //   },
        //   {
        //     validator: checkEmail,
        //     trigger: 'blur'
        //   }
        // ],
        // mobile: [
        //   {
        //     required: true,
        //     message: '请输入手机号码',
        //     trigger: 'blur'
        //   },
        //   {
        //     validator: checkMobile,
        //     trigger: 'blur'
        //   }
        // ]
      },

      rules: {
        // sid: [
        //   { required: true, message: '请输入活动名称', trigger: 'blur' },
        //   { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        // ],
        // productDate: [
        //   { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
        // ],
        // provider: [
        //   { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
        // ],
        // inputDate: [
        //   { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
        // ],
        // keyboarder: [
        //   { required: true, message: '请选择活动资源', trigger: 'change' }
        // ],
        // projectName1: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ],
        // projectNumber1: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ],
        // projectPic1: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ],
        // projectName2: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ],
        // projectNumber2: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ],
        // projectPic2: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ],
        // sopUrl: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ],
        // originalDataUrl: [
        //   { required: true, message: '请填写活动形式', trigger: 'blur' }
        // ],
      },
      barcode_option: {
        displayValue: false
        // fontSize:'15px',
        // format:"EAN-8"
        // width:'1000px',
        // height:'100px',
      },
      headerObj: {
        token: getCookie("token")
      },
      url: this.now_url.now_url
    };
  },
  components: {
    barcode: VueBarcode
  },
  created() {
    var query=this.$route.query
    console.log(query.page)
    if(query.page!=null){
      this.queryInfo.page=Number(query.page)
    }
    if(query.size!=null){
      this.queryInfo.size=Number(query.size)
    }
    this.getBioList();
  },
  mounted() {
    let times = new Date().getTime();
    // console.log(times)
    this.addForm.inputDate = times;
    this.addForm.productDate = times;
    // JsBarcode('#barcode', 'DY2020080400088', {
    //   format: 'CODE39',
    //   lineColor: '#000',
    //   background: '#EBEEF5',
    //   width: 2,
    //   height: 40,
    //   displayValue: true
    // })
  },
  methods: {
    resetBioid() {
      // return (this.search = false),
      (this.selectValue = [0, 0]), (this.selectMax = ""), (this.selectMin = "");
    },
    inputChange(e) {
      //强制刷新
      this.$forceUpdate();
    },
    searchBioid: function() {
      return (
        (this.search = !this.search),
        (this.selectValue = [0, 0]),
        (this.selectMax = ""),
        (this.selectMin = "")
      );
    },
    async getBioList() {
      if (this.query === "") {
        this.queryInfo.query = -1;
      } else {
        this.queryInfo.query = this.query;
      }
      this.permission = "";
      const { data: res } = await this.$axios.get("get", {
        params: this.queryInfo
      });
      if (res.code !== 200) {
        return this.$message.error("获取角色列表失败！");
      }
      this.bioList = res.data;
      this.total = res.total;
      console.log(this.bioList);
    },
    handleSizeChange(newSize) {
      this.$router.push({path:'/add/bioassay',query:{page:this.queryInfo.page,size:this.queryInfo.size}})
      this.queryInfo.size = newSize;
      this.getBioList();
      console.log(`每页 ${newSize} 条`);
    },
    // 监听 分页的page 改变的事件
    handleCurrentChange(newPage) {
      this.$router.push({path:'/add/bioassay',query:{page:this.queryInfo.page,size:this.queryInfo.size}})
      this.queryInfo.page = newPage;
      this.getBioList();
      console.log(`当前页: ${newPage}`);
    },
    onSubmit() {
      console.log("submit!");
    },
    //关闭表单的时候 重设内部属性为空
    addBioClosed() {
      this.$refs.addBioRef.resetFields();
      this.$refs.pic1.clearFiles();
      this.$refs.pic2.clearFiles();
      this.$refs.sop.clearFiles();
      this.$refs.od.clearFiles();
      this.addForm.projectPic1 = "";
      this.addForm.projectPic2 = "";
      this.addForm.sopUrl = "";
      this.addForm.originalDataUrl = "";
    },
    //提交表单 发送请求
    addBio() {
      this.addForm.type = 3;
      //可以设置如果添加了两个文件才允许提交 不过先写成可以直接提交的样子
      this.$refs.addBioRef.validate(async valid => {
        // valid为False 请求失败
        // async 和 await 是等待执行操作，数据库操作是异步的
        console.log(this.addForm);
        if (!valid) return;
        // valid为True 此时可以发起添加用户的网络请求
        //第一个参数是路径 第二个参数提交的data
        const { data: res } = await this.$axios.put("save", this.addForm);
        console.log(res);
        if (res.code !== 200) {
          this.$message.error("表单提交失败！");
        }
        this.$message.success("表单提交成功成功！");
        // 隐藏添加用户的对话框
        this.addFormVisible = false;
        // 重新获取用户的列表
        await this.getBioList();
      });
    },
    beforePicUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isPNG = file.type === "image/png";
      // const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG && !isPNG) {
        this.$message.error("上传的文件只能是 JPG/PNG 格式!");
      }
      // if (!isLt2M) {
      //   this.$message.error('上传头像图片大小不能超过 2MB!');
      // }
      return isJPG || isPNG;
    },
    // beforeFileUpload(file) {
    //   // console.log(file)
    //   const fileName = file.name;
    //   const fileType = fileName.substring(fileName.lastIndexOf('.'));
    //   const isPse = fileType === '.pse';
    //   console.log(fileName)
    //   console.log(fileType)
    //   console.log(isPse)
    //   if (!isPse) {
    //     this.$message.error('上传头像图片只能是 Pse 格式!');
    //   }
    //   return isPse;
    // },
    handlePic1Remove(file, fileList) {
      //删除之后 清空url
      this.editForm.projectPic1 = "";
      this.addForm.projectPic1 = "";
      // this.$message("文件已删除")
    },
    handlePic2Remove(file, fileList) {
      //删除之后 清空url
      this.editForm.projectPic2 = "";
      this.addForm.projectPic2 = "";
      // this.$message("文件已删除")
    },
    handleSopRemove(file, fileList) {
      //删除之后 清空url
      this.editForm.sopUrl = "";
      this.addForm.sopUrl = "";
      // this.$message("文件已删除")
    },
    handleOdRemove(file, fileList) {
      //删除之后 清空url
      this.editForm.originalDataUrl = "";
      this.addForm.originalDataUrl = "";
      // this.$message("文件已删除")
    },
    handlePreview(file) {
      console.log(file);
    },
    pic1HandleSuccess(res, file) {
      this.editForm.projectPic1 = res.msg;
      this.addForm.projectPic1 = res.msg;
      this.$message.success("测试项目1图片提交成功！");
    },
    pic1HandleError() {
      this.$message.error("测试项目1图片提交失败！");
    },
    pic2HandleSuccess(res, file) {
      this.editForm.projectPic1 = res.msg;
      this.addForm.projectPic2 = res.msg;
      this.$message.success("测试项目2图片提交成功！");
    },
    pic2HandleError() {
      this.$message.error("测试项目2图片提交失败！");
    },
    sopHandleSuccess(res, file) {
      // console.log(res)
      // console.log(file)
      this.editForm.sopUrl = res.msg;
      this.addForm.sopUrl = res.msg;
      this.$message.success("测试SOP提交成功！");
    },
    sopHandleError() {
      this.$message.error("测试SOP提交失败！");
    },
    odHandleSuccess(res, file) {
      this.editForm.originalDataUrl = res.msg;
      this.addForm.originalDataUrl = res.msg;
      this.$message.success("测试原始数据提交成功！");
    },
    odHandleError() {
      this.$message.error("测试原始数据提交失败！");
    },
    //时间戳转化为时间
    formatDate(row, column) {
      // 获取单元格数据
      let data = row[column.property];
      if (data == null) {
        return null;
      }
      let dt = new Date(data);
      return dt.getFullYear() + "-" + (dt.getMonth() + 1) + "-" + dt.getDate();
    },
    uploadFile(fileName) {
      console.log(fileName);
      if (!fileName) {
        this.$message.error("文件不存在!");
        return;
      }
      //暂时在RAR里用
      const url = this.now_url.now_url+"server_static/" + fileName;
      //下载

      window.open(url);
    },
    async removeBioBySid(sid) {
      // 弹框询问用户是否删除数据
      const confirmResult = await this.$confirm(
        "此操作将永久删除该数据, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
          // 如果取消 会抛出一个错误error 这里用catch捕获他 然后返回error
          // 可以简写成.catch(err => err)
        }
      ).catch(error => {
        return error;
      });
      // 如果用户确认删除，返回值为字符串 confirm
      // 如果用户取消删除，返回值为字符串 cancel
      if (confirmResult !== "confirm") {
        return this.$message.info("以取消删除");
      }
      // console.log('已删除用户')
      const { data: res } = await this.$axios.delete("/delete?sid=" + sid);
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("删除用户失败！");
      }
      this.$message.success("删除用户成功!");
      await this.getBioList();
    },
    // 展示编辑化合物的对话框
    async showEditDialog(sid) {
      //通过sid找到bioList的相关信息
      for (let i = 0; i < this.bioList.length; i++) {
        if (sid === this.bioList[i].sid) {
          // this.editForm = this.bioList[i]
          // 深拷贝
          this.editForm = JSON.parse(JSON.stringify(this.bioList[i]));
        }
      }
      if (this.editForm.sid == null) {
        return this.$message.error("未找到该化合物信息！");
      }
      this.editBioVisible = true;
    },
    editBioClosed() {
      this.$refs.editBioRef.resetFields();
      this.$refs.pic1.clearFiles();
      this.$refs.pic2.clearFiles();
      this.$refs.sop.clearFiles();
      this.$refs.od.clearFiles();
      this.addForm.projectPic1 = "";
      this.addForm.projectPic2 = "";
      this.addForm.sopUrl = "";
      this.addForm.originalDataUrl = "";
    },
    // 修改化合物信息并提交
    editBio() {
      this.$refs.editBioRef.validate(async valid => {
        //source 0自己  1分享 2组 对应接口
        var source = this.editForm.source;
        this.editForm.type = 3;
        if (!valid) return;
        // 发起修改化合物信息的请求
        if (source === 0) {
          const { data: res } = await this.$axios.put("/update", this.editForm);
          if (res.code !== 200) {
            return this.$message.error("更新化合物结构失败");
          }
        } else if (source === 1) {
          const { data: res } = await this.$axios.put(
            "/updateShare",
            this.editForm
          );
          if (res.code !== 200) {
            return this.$message.error("更新化合物结构失败");
          }
        } else if (source === 2) {
          const { data: res } = await this.$axios.put(
            "/updateGroup",
            this.editForm
          );
          if (res.code !== 200) {
            return this.$message.error("更新化合物结构失败");
          }
        } else {
          return this.$message.error("数据来源错误！");
        }
        // 关闭对话框
        this.editBioVisible = false;
        // 刷新数据列表
        await this.getBioList();
        // 提示修改成功
        this.$message.success("更新化合物结构成功");
      });
    },
    async downloadCompound() {
      if (this.queryInfo.type === 0) {
        return this.$message.error("未成功选择化合物类型！");
      }
      //得到最低值min 最高值max
      console.log("最小值和最大值为");
      console.log(this.selectMin);
      console.log(this.selectMax);
      console.log("选择数组为");
      console.log(this.multipleSelectionSid);
      //返回msg和code
      const { data: res } = await this.$axios.post("generatePageType", {
        index: this.selectMin,
        lastIndex: this.selectMax,
        longs: this.multipleSelectionSid,
        type: this.queryInfo.type
      });
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("下载化合物失败！");
      }
      //只返回excel的Url
      this.excelUrl = res.msg;
      console.log(this.excelUrl);
      if (!this.excelUrl) {
        this.$message.error("文件不存在!");
        return;
      }
      const url = this.now_url.now_url+"return_file/" + this.excelUrl;
      //下载

      window.open(url);
    },
    async downloadCompoundAndPic() {
      if (this.queryInfo.type === 0) {
        return this.$message.error("未成功选择化合物类型！");
      }
      //得到最低值min 最高值max
      console.log("最小值和最大值为");
      console.log(this.selectMin);
      console.log(this.selectMax);
      console.log("选择数组为");
      console.log(this.multipleSelectionSid);
      //返回msg和code
      const { data: res } = await this.$axios.post("generatePageTypeFile", {
        index: this.selectMin,
        lastIndex: this.selectMax,
        longs: this.multipleSelectionSid,
        type: this.queryInfo.type
      });
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("下载化合物失败！");
      }
      //只返回excel的Url
      this.excelUrl = res.data[0];
      this.rarUrl = res.data[1];
      let url1 = this.now_url.now_url+"return_file/" + this.excelUrl;
      let url2 = this.now_url.now_url+"return_file/" + this.rarUrl;
      let fileList = [url1, url2];
      console.log(fileList[0]);
      console.log(fileList[1]);
      for (let i = 0; i < fileList.length; i++) {
        const iframe = document.createElement("iframe");
        iframe.style.display = "none"; //防止影响页面
        iframe.style.height = 0; //防止影响页面
        iframe.src = fileList[i];
        document.body.appendChild(iframe); //这一行必须，iframe挂在到dom树上才会发请求//5分钟之后删除
        setTimeout(() => {
          iframe.remove();
        }, 5 * 60 * 1000);
      }
    },
    async downloadAllCompound() {
      if (this.queryInfo.type === 0) {
        return this.$message.error("未成功选择化合物类型！");
      }
      console.log(this.queryInfo.type);
      const { data: res } = await this.$axios.get("/generateAllType", {
        params: {
          type: this.queryInfo.type
        }
      });
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("下载化合物失败！");
      }
      //也是返回一个
      this.excelUrl = res.msg;
      // this.rarUrl=res.pic
      console.log(this.excelUrl);
      if (!this.excelUrl) {
        this.$message.error("文件不存在!");
        return;
      }
      const url = this.now_url.now_url+"return_file/" + this.excelUrl;
      //下载

      window.open(url);
    },
    async downloadAllCompoundAndPic() {
      if (this.queryInfo.type === 0) {
        return this.$message.error("未成功选择化合物类型！");
      }
      //返回4个参数 msg为获取成功 code excel pic
      console.log("type为");
      console.log(this.queryInfo.type);
      const { data: res } = await this.$axios.get("generateAllTypeFile", {
        params: {
          type: this.queryInfo.type
        }
      });
      console.log(res);
      if (res.code !== 200) {
        return this.$message.error("下载化合物失败！");
      }
      this.excelUrl = res.data[0];
      this.rarUrl = res.data[1];
      let url1 = this.now_url.now_url+"return_file/" + this.excelUrl;
      let url2 =this.now_url.now_url+"return_file/" + this.rarUrl;
      let fileList = [url1, url2];
      console.log(fileList[0]);
      console.log(fileList[1]);
      for (let i = 0; i < fileList.length; i++) {
        const iframe = document.createElement("iframe");
        iframe.style.display = "none"; //防止影响页面
        iframe.style.height = 0; //防止影响页面
        iframe.src = fileList[i];
        document.body.appendChild(iframe); //这一行必须，iframe挂在到dom树上才会发请求//5分钟之后删除
        setTimeout(() => {
          iframe.remove();
        }, 5 * 60 * 1000);
      }
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
      this.multipleSelectionSid = [];
      if (this.multipleSelection) {
        this.multipleSelection.forEach(row => {
          this.multipleSelectionSid.push(row.sid);
        });
      }
      console.log(this.multipleSelectionSid);
    },
    getRowBioKeys(row) {
      return row.sid;
    }
  }
};
</script>
<!--删除了style的scope 减少权重-->
<style>
.bioTable {
  margin-top: 20px;
}

.demo-table-expand {
  font-size: 0;
}

.demo-table-expand label {
  /*width: 90px;*/
  color: #99a9bf;
}

.demo-table-expand {
  margin-right: 0;
  margin-bottom: 0;
}

.expand-msg {
  border-radius: 1px !important;
  border: 1px solid rgba(239, 239, 239, 0.36);
  /*height: 50px;*/
  line-height: 50px;
  /*border: 1px solid #000 !important;*/
  /*border-right: none;*/
}

.expand-msg-left {
  border-left: 2px solid rgba(239, 239, 239, 0.36);
  /*border-left: 2px solid #d7dae2;*/
}

.table-item {
  margin-bottom: 0px !important;
  line-height: 50px;
  padding-left: 10px;
}

.table-item-span {
  line-height: 50px;
}

.add-button {
  margin-top: 5px;
}

.table-image {
  width: auto;
  height: auto;
  /*max-width: 50%;*/
  /*max-height: 50%;*/
  display: block;
}

/*.el-form-item .table-item label{*/
/*  line-height: 50px;*/
/*  border-left: 2px solid #d7dae2;*/
/*  padding-left: 10px;*/
/*}*/
/*.el-form-item .demo-table-expand{*/
/*  margin-bottom: 0px !important;*/
/*}*/

/*.el-form-item__content{*/
/*  line-height: 50px;*/
/*  border-left: 2px solid #d7dae2;*/
/*  padding-left: 10px;*/
/*}*/
/*.el-form-item__label{*/
/*  padding-left: 10px;*/
/*}*/
.btn-all {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.cell {
  text-align: center;
}

.sx {
  width: 1.5px;
  height: 18px;
  /* font-size: 14px;
  font-weight: 400; */
  background: #ccccccff;
}

.addimg {
  width: 22px;
  height: 16px;
  margin-left: 0px;
  margin-top: 0;
  float: left;
}
a {
  text-decoration: none;
  color: #2bbb7f;
}
.Biosearch {
  margin-top: 25px;
  background: rgba(247, 247, 247, 1);
  display: flex;
  height: 100px;
  align-items: center;
  padding: 0 30px;
  justify-content: space-between;
}
</style>
